웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
안녕하세요. 조금 늦게 인사드려 죄송합니다ㅠ 저번 시간에 이어서 오늘도 도움이 될만한 내용으로 인사드릴 수 있게되어 감사합니다.
지난주 예고처럼 드디더 실전 퍼블리싱 시간이 왔습니다^^ 사실 기초학습은 반드시 필요합니다. 간단한 부분을 이해하지 못하면 그 뒤에 나오는 부분을 이해하는데 훨씬 많은 시간이 소요됩니다
..
조금 늦는 길이 나중에는 더 빠른 길이라는 사실!
어쨌든 이번 시간부터는 실제 웹을 함께 만들면서 마주하게되는 다양한 이슈들을 함께 배우고자합니다 :)
이번 목표는 스스로 나만의 홈페이지를 만들자!! 입니다. 혼자서 홈페이지를 만드실 수 있다면? 그 이후에는 스스로 학습하는 효과가 이전에 비하여 굉장히 빠르게되실겁니다. 그때까지 하나하나 내것으로 만드는 과정이 필요하겠죠?
여기서 홈페이지를 만드는 과정을 알아둬야겠군요!! 홈페이지를 만들기 위해서는 일반적으로 다음의 과정이 이루어집니다.
1. 웹서비스 기획 시작
2. 기획에 따른 스토리보드 또는 화면설계의 산출물을 도출
3. 2번의 산툴물을 통해 웹디자인 시작
4. 디자인에 따른 디자인 시안 완성
5. 완성된 시안에 따른 클라이언트 또는 이해관계자의 컨펌
6. 5번을 통한 피드백을 다음 시안에 반영
7. 6번의 반복을 통한 최종 시안 완성
8. 웹퍼블리싱 시작
9. 퍼블리셔, 프론트엔드 개발자의 웹퍼블리싱을 통해 퍼블리싱 웹페이지 완료
10. 서버개발자의 퍼블리싱 페이지에 서버와 데이터베이스 연동 작업 진행
11. 완료후 QA(Quality Assurance) 진행
12. 11번에 발견된 이슈 수정 및 보완
13. 홈페이지 완료 !!
이렇게보니 단계가 꽤 복잡해 보입니다. 퍼블리셔의 작업 부분은 8, 9, 12번이 주요 부분입니다. 이제 뭔가 만들어볼만한 완료 디자인이 필요하겠군요. 이번에 만들어볼 페이지는 바로 아래의 디자인입니다.
구축하고자 하는 사이트는 자신을 홍보할 수 있는 개인 홈페이지입니다. 딱히 사용할 곳은 없겠지만 취업을 위해 이력서에 첨부할 수 있겠죠??
먼저 홈페이지로 만들기 위해 새로운 파일을 생성합니다. profile. html 이 좋겠군요. 생성된 html을 편집기에서 열어 아래의 기본적인 코딩을 합시다.
클라이언트에게 보여줄 뷰(View) 영역은 body태그의 안에 있는 주석 아래부터 입력하면 되겠습니다.
웹퍼블리싱의 주요 코딩을 하기 이전에 화면을 어떻게 구성할 것이고 머리속으로 설계 및 구상하는 작업이 필요합니다. 그렇지 않으면 이미 작성한 태그 위치를 변경해야 할 수 있으니 매우 중요한 작업단계입니다.
일반적으로 화면을 만들때... 화면을 구성하는 큰 틀을 기준으로 3~4 단위로 분류합니다. 예를들면 아래와 같이 분류할 수 있겠죠.
모든 사이트가 그렇지는 않겠지만 대부분 위와 같이 헤더와 풋터를 구분하여 사용합니다. 간략하게 알아보면 다음과 같습니다.
; gnb 영역으로 쓰이는 이곳은 가장 중요한 분중 하나입니다. 왜냐면 대부분 header 영역이 모든 페이지에 공통 적용되기 때문입니다. 게다가 상단에 노출되는 만큼 사용자에게 많이 노출되은 영역으로 메인 카테고리 및 로그인, 로고 등등 필수적인 내용을 담게됩니다.
; 메인답게 현재 페이지가 가지게 될 가장 유니크한 콘텐츠를 보여주는 영역입니다. 예를들어 프로필 페이지라면 프로필에 담길 내용들이 모두 이 영역에 담겨지게됩니다.
! 메인영역에 다른 종류의 콘텐츠를 가지는 것은 안되나요?
물론 원래 페이지 의도와 관련없는 콘텐츠도 가질 수 있습니다. 다만 가급적 페이지에 가장 정확한 ... 밀접한 콘텐츠를 담는 영역임을 인지하고 있으면 됩니다.
참고로 웹페이지를 퍼블리싱할 경우 의미있는 시맨틱(Semantic) 태그를 사용하므로써 의미와 의도를 나타낼 수 있습니다. 예를들어 메인 영역에 성격이 다른 콘텐츠를 넣을 경우 일반적인 div 또는 section 태그가 아닌 aside 태그를 사용할 수 있습니다.
!! 시맨틱(Semantic) 태그에 대하여...
시맨틱 태그는 각각의 의미를 가지고 있는 태그입니다. 태그의 사용이 웹페이지에게 드러나지 않는 부분이므로 중요하지 않게 생각할 수 있으나 시맨틱 태그를 사용할 경우 매우 의미있는 정보를 전달할 수 있습니다...
예를들어 페이지의 코드를 수정하는 사람에게 예측 가능한 정보를 주어 유지보수등이 용이할 수 있고 페이지를 크롤링하는 다른 웹서비스 제공업체에게 어떤 부분이 중요하고 어떤 부분이 의미 있는 부분인지 더 많은 정보를 제공하는 것입니다.
! 실제로 시맨틱 태그는 html5에서 더 많이 확장되었으며 다양한 시맨틱 태그가 존재합니다. 시맨틱 태그를 사용하지 않는 것은 화려한 디자인의 두개의 같은 상품 중 하나가 좋지 않은 재료를 사용한 것과 같다고 볼 수 있죠...
그럼 시맨틱 태그는 어떤 것이 존재할까요??
이처러 정말 많은 태그가 각각의 의미를 가지고 사용되야합니다. 사용되는 시맨틱 태그가 만들어진 의도와 전혀 다르게 사용되면 켤코 안 될것입니다...
헤더가 웹사이트의 주요 카테고리, 콘텐츠를 구분하는 영역이라면 풋터는 웹사이트의 기본적인 정보를 담습니다. 이곳에는 회사 주소 및 보안, 관계회사 등등 기타 다양한 정보를 제공합니다. 또한 헤더처럼 풋터 역시 전체 페이지에 노출되는 영역 중 하나입니다.
헤더, 풋터, 메인 영역에 대하여 어느 정도 이해가 되시죠? 다음번에는 메인 영역의 내부 코딩을 진행하도록 하겠습니다. :)
지난주 예고처럼 드디더 실전 퍼블리싱 시간이 왔습니다^^ 사실 기초학습은 반드시 필요합니다. 간단한 부분을 이해하지 못하면 그 뒤에 나오는 부분을 이해하는데 훨씬 많은 시간이 소요됩니다
..
조금 늦는 길이 나중에는 더 빠른 길이라는 사실!
어쨌든 이번 시간부터는 실제 웹을 함께 만들면서 마주하게되는 다양한 이슈들을 함께 배우고자합니다 :)
이번 목표는 스스로 나만의 홈페이지를 만들자!! 입니다. 혼자서 홈페이지를 만드실 수 있다면? 그 이후에는 스스로 학습하는 효과가 이전에 비하여 굉장히 빠르게되실겁니다. 그때까지 하나하나 내것으로 만드는 과정이 필요하겠죠?
여기서 홈페이지를 만드는 과정을 알아둬야겠군요!! 홈페이지를 만들기 위해서는 일반적으로 다음의 과정이 이루어집니다.
1. 웹서비스 기획 시작
2. 기획에 따른 스토리보드 또는 화면설계의 산출물을 도출
3. 2번의 산툴물을 통해 웹디자인 시작
4. 디자인에 따른 디자인 시안 완성
5. 완성된 시안에 따른 클라이언트 또는 이해관계자의 컨펌
6. 5번을 통한 피드백을 다음 시안에 반영
7. 6번의 반복을 통한 최종 시안 완성
8. 웹퍼블리싱 시작
9. 퍼블리셔, 프론트엔드 개발자의 웹퍼블리싱을 통해 퍼블리싱 웹페이지 완료
10. 서버개발자의 퍼블리싱 페이지에 서버와 데이터베이스 연동 작업 진행
11. 완료후 QA(Quality Assurance) 진행
12. 11번에 발견된 이슈 수정 및 보완
13. 홈페이지 완료 !!
이렇게보니 단계가 꽤 복잡해 보입니다. 퍼블리셔의 작업 부분은 8, 9, 12번이 주요 부분입니다. 이제 뭔가 만들어볼만한 완료 디자인이 필요하겠군요. 이번에 만들어볼 페이지는 바로 아래의 디자인입니다.
구축하고자 하는 사이트는 자신을 홍보할 수 있는 개인 홈페이지입니다. 딱히 사용할 곳은 없겠지만 취업을 위해 이력서에 첨부할 수 있겠죠??
먼저 홈페이지로 만들기 위해 새로운 파일을 생성합니다. profile. html 이 좋겠군요. 생성된 html을 편집기에서 열어 아래의 기본적인 코딩을 합시다.
<!DOCTYPE html>
<html>
<body>
<!-- 홈페이지 만들기 시작 -->
</body>
</html>
<html>
<body>
<!-- 홈페이지 만들기 시작 -->
</body>
</html>
클라이언트에게 보여줄 뷰(View) 영역은 body태그의 안에 있는 주석 아래부터 입력하면 되겠습니다.
웹퍼블리싱의 주요 코딩을 하기 이전에 화면을 어떻게 구성할 것이고 머리속으로 설계 및 구상하는 작업이 필요합니다. 그렇지 않으면 이미 작성한 태그 위치를 변경해야 할 수 있으니 매우 중요한 작업단계입니다.
일반적으로 화면을 만들때... 화면을 구성하는 큰 틀을 기준으로 3~4 단위로 분류합니다. 예를들면 아래와 같이 분류할 수 있겠죠.
헤더 영역
메인 영역
풋터 영역
모든 사이트가 그렇지는 않겠지만 대부분 위와 같이 헤더와 풋터를 구분하여 사용합니다. 간략하게 알아보면 다음과 같습니다.
1. 헤더영역
; gnb 영역으로 쓰이는 이곳은 가장 중요한 분중 하나입니다. 왜냐면 대부분 header 영역이 모든 페이지에 공통 적용되기 때문입니다. 게다가 상단에 노출되는 만큼 사용자에게 많이 노출되은 영역으로 메인 카테고리 및 로그인, 로고 등등 필수적인 내용을 담게됩니다.
2. 메인 영역
; 메인답게 현재 페이지가 가지게 될 가장 유니크한 콘텐츠를 보여주는 영역입니다. 예를들어 프로필 페이지라면 프로필에 담길 내용들이 모두 이 영역에 담겨지게됩니다.
! 메인영역에 다른 종류의 콘텐츠를 가지는 것은 안되나요?
물론 원래 페이지 의도와 관련없는 콘텐츠도 가질 수 있습니다. 다만 가급적 페이지에 가장 정확한 ... 밀접한 콘텐츠를 담는 영역임을 인지하고 있으면 됩니다.
참고로 웹페이지를 퍼블리싱할 경우 의미있는 시맨틱(Semantic) 태그를 사용하므로써 의미와 의도를 나타낼 수 있습니다. 예를들어 메인 영역에 성격이 다른 콘텐츠를 넣을 경우 일반적인 div 또는 section 태그가 아닌 aside 태그를 사용할 수 있습니다.
!! 시맨틱(Semantic) 태그에 대하여...
시맨틱 태그는 각각의 의미를 가지고 있는 태그입니다. 태그의 사용이 웹페이지에게 드러나지 않는 부분이므로 중요하지 않게 생각할 수 있으나 시맨틱 태그를 사용할 경우 매우 의미있는 정보를 전달할 수 있습니다...
예를들어 페이지의 코드를 수정하는 사람에게 예측 가능한 정보를 주어 유지보수등이 용이할 수 있고 페이지를 크롤링하는 다른 웹서비스 제공업체에게 어떤 부분이 중요하고 어떤 부분이 의미 있는 부분인지 더 많은 정보를 제공하는 것입니다.
! 실제로 시맨틱 태그는 html5에서 더 많이 확장되었으며 다양한 시맨틱 태그가 존재합니다. 시맨틱 태그를 사용하지 않는 것은 화려한 디자인의 두개의 같은 상품 중 하나가 좋지 않은 재료를 사용한 것과 같다고 볼 수 있죠...
그럼 시맨틱 태그는 어떤 것이 존재할까요??
# 시맨틱(Semantic) 태그 리스트
section
aside
nav
article
figure
figcapture
hr
mark
time
address
small
strong
em
aside
nav
article
figure
figcapture
hr
mark
time
address
small
strong
em
이처러 정말 많은 태그가 각각의 의미를 가지고 사용되야합니다. 사용되는 시맨틱 태그가 만들어진 의도와 전혀 다르게 사용되면 켤코 안 될것입니다...
3. 풋터 영역
헤더가 웹사이트의 주요 카테고리, 콘텐츠를 구분하는 영역이라면 풋터는 웹사이트의 기본적인 정보를 담습니다. 이곳에는 회사 주소 및 보안, 관계회사 등등 기타 다양한 정보를 제공합니다. 또한 헤더처럼 풋터 역시 전체 페이지에 노출되는 영역 중 하나입니다.
헤더, 풋터, 메인 영역에 대하여 어느 정도 이해가 되시죠? 다음번에는 메인 영역의 내부 코딩을 진행하도록 하겠습니다. :)
아래의 글도 찾고 계시지 않나요?
